<template>
  <div>
    <t-layout>
      <t-header>
        <t-head-menu theme="light" v-model:value="data.menuValue" height="120px" @change="tabMenu">
          <template #logo>
            <div class="logo">
              <img src="vite.svg" alt="logo"> bowlCake管理系统
            </div>
          </template>
          <t-menu-item v-for="(item, i) in menu" :key="i" :value="item.value"> {{ item.name }} </t-menu-item>
<!--          <t-menu-item value="user"> 用户管理 </t-menu-item>-->
<!--          <t-menu-item value="teacher"> 教师管理 </t-menu-item>-->
<!--          <t-menu-item value="student"> 学生管理 </t-menu-item>-->
<!--          <t-menu-item value="class"> 班级管理 </t-menu-item>-->
          <template #operations>
            <div class="userInfo">
              <img src="ava1.png">
              <t-dropdown :options="options" :min-column-width="112" @click="clickHandler">
                <div class="tdesign-demo-dropdown-trigger">
                  <t-button variant="text">
                    <span class="tdesign-demo-dropdown__text"> {{ store.state.username }} <t-icon name="chevron-down" size="16" /> </span>
                  </t-button>
                </div>
              </t-dropdown>
            </div>
          </template>
        </t-head-menu>
      </t-header>
      <t-content class="content">
        <router-view></router-view>
      </t-content>
      <t-footer class="footer"> Copyright @ 2019-{{ new Date().getFullYear() }} bowlCake. All Rights Reserved
      </t-footer>
    </t-layout>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {useStore} from "vuex";
import {DropdownOption} from "tdesign-vue-next";
const route = useRoute();
const router = useRouter();
const store = useStore();
const data = reactive({
  menuValue: 'index',
});
const menu = ref([
  { name: '主页', value: 'index' }
])
const options = ref([
  {
    content: '退出登录',
    value: 'logout',
  },
]);
// 切换菜单
function tabMenu(value: string) {
  router.push({
    name: value
  });
}

// 菜单权限
function setMenu() {
  if(store.state.userType == 3) {
    menu.value = [
      { name: '主页', value: 'index' },
      { name: '用户管理', value: 'user' },
      { name: '教师管理', value: 'teacher' },
      { name: '学生管理', value: 'student' },
      { name: '班级管理', value: 'class' },
    ]
  }
}

// 退出登录
const clickHandler = (data:DropdownOption) => {
  if(data.value === 'logout') {
    localStorage.clear();
    router.push({ name: 'login' });
  }
}

onMounted(() => {
  data.menuValue = route.name as string;
  setMenu();
})
</script>

<style lang="less" scoped>
.logo {
  margin: 0 10px;
  font-size: 18px;
  font-weight: 900;
}
.userInfo{
  display: flex;
  img{
    width: 70px;
    height: 70px;
  }
}

.t-menu__operations-icon {
  cursor: pointer;
}

.content {
  margin: 15px 10px 0 10px;
  background-color: #fff;
  height: calc(100vh - 84px - 65px);
}

.footer {
  text-align: center;
}
</style>
